<template>
  <div id="train-ticket-create">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/train/refund/orders">火车退票</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">新建</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <div class="card">
      <div class="card-body bg-info text-white py-1">车次信息</div>
      <table class="table table-sm mb-0">
        <thead>
          <tr class="small">
            <th>火车班次</th>
            <th>出发站</th>
            <th>到达站</th>
            <th>出发日期</th>
            <th>开车时间</th>
            <th>到站时间</th>
            <th>座位等级</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ trainNo }}</td>
            <td>{{ dcity }}</td>
            <td>{{ acity }}</td>
            <td>{{ ddate }}</td>
            <td>{{ dtime }}</td>
            <td>{{ atime }}</td>
            <td>{{ seatClass }}</td>
          </tr>
        </tbody>
      </table>
      <div class="card-body bg-info text-white py-1">乘车人信息</div>
      <table class="table table-sm mb-0">
        <thead>
          <tr>
            <th></th>
            <th>姓名</th>
            <th>手机</th>
            <th>车厢号</th>
            <th>座位号</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(info, index) in passengers">
            <th>
              <a
                href="javascript:void(0);"
                @click.stop="delPsg(index)"
                class="btn btn-sm btn-danger"
                >移除</a
              >
            </th>
            <td>{{ info.name }}</td>
            <td>{{ info.mobile }}</td>
            <td>{{ info.coachNo }}</td>
            <td>{{ info.seatNo }}</td>
          </tr>
        </tbody>
      </table>
      <div class="card-body bg-info text-white py-1">价格信息</div>
      <table class="table table-sm">
        <tbody>
          <tr>
            <td>
              实收退款/人
              <input type="text" class="form-control" v-model.number="price" />
            </td>
            <td>
              退客金额/人
              <input type="text" class="form-control" v-model.number="cost" />
            </td>
            <td>
              服务费
              <input
                type="text"
                class="form-control"
                v-model.number="serviceCharge"
              />
            </td>
          </tr>
          <tr>
            <td>
              实收总额: <big class="text-success">{{ totalAmount }}</big>
            </td>
            <td>总成本: {{ totalCost }}</td>
            <td>
              利润: <big class="text-danger">{{ profit }}</big>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body py-2">
        <form id="frmUser" role="form" class="form-horizontal">
          <div class="row mb-2">
            <label class="control-label col-3 text-end"> 客户名称 </label>
            <div class="col-9">
              {{ customerName }}
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-3 text-end"> 原订单号 </label>
            <div class="col-9">
              {{ trainOrderNo }}
            </div>
          </div>

          <div class="row mb-2">
            <label class="control-label col-3 text-end"> 外部订单号 </label>
            <div class="col-9">
              <input
                type="text"
                class="form-control"
                v-model="externalOrderNo"
              />
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-3 text-end"> 备注 </label>
            <div class="col-9">
              <input type="text" class="form-control" v-model="remark" />
            </div>
          </div>
        </form>
      </div>
      <div class="card-footer text-center">
        <button
          type="button"
          class="btn btn-success btn-lg"
          @click.stop="save($event.target)"
        >
          保存
        </button>
        <button
          type="button"
          class="btn btn-secondary btn-sm ms-5"
          @click.stop="cancel()"
        >
          取消
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { searchTrainOrder } from "@/api/train.js";
import { createRefundTrainOrder } from "@/api/train.js";

import $ from "jquery";
import MyDatePicker from "@/components/my-datepicker.vue";

import MySelectSupplier from "@/components/my-select-supplier.vue";
import MySelectPayment from "@/components/my-select-payment.vue";

import SelectCustomer from "@/components/select-customer-costcenter.vue";

export default {
  components: {
    MyDatePicker,
    MySelectSupplier,
    MySelectPayment,

    SelectCustomer,
  },
  data() {
    return {
      trainOrderId: 0,
      trainOrderDetail: null,

      customerName: "",
      trainOrderNo: "",

      trainNo: "",
      dcity: "",
      acity: "",
      ddate: "",
      dtime: "",
      atime: "",
      seatClass: "",
      passengers: [],
      price: 0,
      cost: 0,
      serviceCharge: 0,
      totalAmount: 0,
      totalCost: 0,
      profit: 0,
      remark: "",
      externalOrderNo: "",
    };
  },
  computed: {
    psgCount: function () {
      return this.passengers.length;
    },
  },
  watch: {
    cost: function () {
      this.calc();
    },
    serviceCharge: function () {
      this.calc();
    },
    price: function () {
      this.calc();
    },
    psgCount: function () {
      this.calc();
    },
  },
  mounted: function () {
    const id = this.$route.query.trainOrderId;
    if (id !== undefined) {
      this.trainOrderId = parseInt(id);
      console.log(this.trainOrderId);

      let int1 = setInterval(() => {
        this.searchTrainOrder(this.trainOrderId);

        clearInterval(int1);
      }, 100);
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchTrainOrder: function (id) {
      searchTrainOrder(id, (val) => {
        this.trainOrderDetail = val;

        if (val !== null && val.id === id) {
          this.passengers.splice(0);
          for (let i = 0; i < val.passengers.length; i++) {
            const psg = val.passengers[i];
            this.passengers.push({
              name: psg.name,
              coachNo: psg.coachNo,
              seatNo: psg.seatNo,
              mobile: psg.mobile,
            });
          }

          this.trainNo = val.trainNo;
          this.dcity = val.dcity;
          this.acity = val.acity;
          this.ddate = val.ddate;
          this.dtime = val.dtime;
          this.atime = val.atime;
          this.seatClass = val.seatClass;
          this.price = val.cost;
          this.cost = val.price;

          this.customerName = val.customerName;
          this.trainOrderNo = val.orderNo;
        }
      });
    },
    addPsg: function () {
      this.passengers.push({
        name: "",
        mobile: "",
        coachNo: "",
        seatNo: "",
      });
    },
    delPsg: function (index) {
      this.passengers.splice(index, 1);
    },
    save: function (btn) {
      $(btn).attr("disabled", true);
      const params = {
        trainOrderNo: this.trainOrderNo,

        trainNo: this.trainNo,
        dcity: this.dcity,
        acity: this.acity,
        ddate: this.ddate,
        dtime: this.dtime,
        atime: this.atime,
        seatClass: this.seatClass,
        price: this.price,
        cost: this.cost,
        serviceCharge: this.serviceCharge,
        totalAmount: this.totalAmount,
        totalCost: this.totalCost,
        profit: this.profit,
        remark: this.remark,
        externalOrderNo: this.externalOrderNo,
        passengers: this.passengers,
      };

      createRefundTrainOrder(
        JSON.stringify(params),
        (v) => {
          if (v.status !== "OK") {
            this.showErrMsg(v.errmsg, "danger");
          } else {
            this.$router.push("/train/refund/orders");
          }
        },
        () => {
          $(btn).attr("disabled", false);
        }
      );
    },
    calc: function () {
      this.totalAmount = this.psgCount * this.price + this.serviceCharge;
      this.totalCost = this.psgCount * this.cost;
      this.profit = this.totalAmount - this.totalCost;
    },
    cancel: function () {
      this.$router.push("/train/refund/orders");
    },
  },
};
</script>